<template>
  <div class="common-page f-c">
    <BackPage title="评价管理" />
    <div class="search-params f-r a-c j-b">
      <el-form inline>
        <el-form-item label="项目名称：">
          <el-input clearable v-model="searchParams.projectName" />
        </el-form-item>
        <el-form-item label="评价状态：">
          <el-select clearable v-model="searchParams.status">
            <el-option v-for="item in options" :key="item.value" :value="item.value" :label="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="事项名称：">
          <el-input clearable v-model="searchParams.event" />
        </el-form-item>
        <el-form-item label="办理时间：">
          <el-date-picker
            v-model="searchParams.timeValue"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" round @click="onSearch">筛选</el-button>
          <el-button round @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="f-r j-e">
      <el-form inline>
        <el-form-item>
          <el-button type="primary" round @click="onExport">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-box f-g">
      <el-table
        height="100%"
        v-loading="loading"
        stripe
        :data="tableData"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(255, 255, 255, 0.8)"
        @selection-change="onSelect"
      >
        <el-table-column type="index" width="80px" label="序号" align="center" />
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label" align="center" />
        <el-table-column label="状态" width="120px" prop="statusName">
          <template slot-scope="scope">
            <span :class="['status', 'status' + scope.row.status]">{{ scope.row.statusName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" width="120px">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 0" type="text" @click="onRel(scope.row)">关联中介</el-button>
            <el-button v-if="scope.row.status == 1" type="text" @click="onAP(scope.row)">去评价</el-button>
            <el-button v-if="scope.row.status == 2" type="text" @click="onRead(scope.row)">查看评价</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination
        background
        :current-page="pageNo"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalSize"
        @size-change="changePageSize"
        @current-change="changePageNo"
      />
    </div>
    <ApAdd ref="ApAddRef" @get-page="initData" />
    <ItemRel ref="ItemRelRef" @get-page="initData" />
    <APList ref="APListRef" />

  </div>
</template>

<script>
import crud from '@/mixins/crud'
import { http_intermediary_app } from '@/api'
import ItemRel from './rel'
import APList from './detail'
import ApAdd from './add'
import { exportFile } from '@/utils/request'
export default {
  name: 'Index',
  components: {
    ItemRel,
    APList,
    ApAdd
  },
  mixins: [crud],
  data() {
    return {
      request: http_intermediary_app,
      searchParams: {
        projectName: '',
        status: '',
        event: '',
        timeValue: []
      },
      options: [
        { value: 0, name: '未关联中介' },
        { value: 3, name: '进行中' },
        { value: 1, name: '已完成（待评价）' },
        { value: 2, name: '已评价' }
      ],
      columns: [
        { prop: 'event', label: '事项名称' },
        { prop: 'projectName', label: '所属项目' },
        { prop: 'projectCode', label: '项目代码' },
        { prop: 'projectUnit', label: '建设单位/城建人' },
        { prop: 'certificatesCode', label: '统一社会信用代码/个人身份证号' },
        { prop: 'handDepartment', label: '办理部门' },
        { prop: 'handleTime', label: '办理时间' }
      ],
      tableData: [
      ]
    }
  },
  methods: {
    formatTableData(data) {
      data.forEach(el => {
        el.statusName = this.options.find(item => item.value == el.status)?.name
      })
    },
    onExport() {
      exportFile()
    },
    onAdd() {

    },
    onRel(item) {
      this.$refs.ItemRelRef.open(item)
    },
    onAP(item) {
      this.$refs.ApAddRef.open(item)
    },
    onRead(item) {
      this.$refs.APListRef.open(item)
    }
  }
}
</script>

<style scoped lang="scss">
.status {
    padding: 2px 6px;
    display: inline-block;
  line-height: 26px;
  border-radius: 13px;
  border: 1px solid;
  font-size: 12px;
  text-align: center;
}
.status0 {
  color: #4880FF;
  background: #F1F5FF;
  border-color: #4880FF;
}
.status3 {
  color: #4880FF;
  background: #F1F5FF;
  border-color: #4880FF;
}
.status1 {
  color: #FF8000;
  background: #FFECEC;
  border-color: #FF8000;
}
.status2 {
  color: #21B95E;
  background: #DEFFEB;
  border-color: #21B95E;
}
</style>
